import React,{ Component } from "react"
import  {Link,browserHistory} from 'react-router'
import fetchData from '../../util/fetch';
var ReactDOM=require("react-dom");
class FeatureService extends React.Component{
    constructor(props){
        super(props)
        this.state={
            title:"服务",
            homelist:[],
            banner : null,
            intelligence : null,
            healthAndFashion : null,
            medical : null,
            international : null
        }
    }
    getData(url,opts){
        fetchData(url,opts,function(res){
            let data = eval(res.data)
            switch (opts.str){
                case '2-7':
                    this.setState({
                        intelligence:data
                    });
                    break;
                case '2-8':
                    this.setState({
                        healthAndFashion:data
                    });
                    break;
                case '2-9':
                    this.setState({
                        medical:data
                    });
                    break;
                case '2-10':
                    this.setState({
                        international:data
                    });
                    break;
            }
        }.bind(this))
    }

    getBannerData(url,opts){
        fetchData(url,opts,function(res){
            let data = eval(res.data);
            this.setState({
                banner : data
            });
        }.bind(this));
    }

    componentWillMount(){
        //banner类型 1首页、2hibaby服务、3美研中心、4活动咨询、5新妈分享、6关于Hibaby
        this.getBannerData('/crm/api/v1/web/banner/findOneByType',{"dataId": 22});
        //2-7	环保智能
        this.getData('/crm/api/v1/web/news/findOneByType',{"str":"2-7"});
        // 2-8	健康时尚
        this.getData('/crm/api/v1/web/news/findOneByType',{"str":"2-8"});
        // 2-9	医疗养护
        this.getData('/crm/api/v1/web/news/findOneByType',{"str":"2-9"});
        // 2-10	融合国际
        this.getData('/crm/api/v1/web/news/findOneByType',{"str":"2-10"});
    }

    componentDidMount() {
        if (this.props.params.anchor) {
            const anchor = '.' + this.props.params.anchor;
            setTimeout(function () {
                $("body").animate({ scrollTop: $(anchor).offset().top }, 500)
            }, 350)
        }

    }

    render(){
        return (
			<div className="featureService">
				<div className="service-banner"><img src={this.state.banner?this.state.banner.imgUrl:null}/></div>
				<div className="content MedicalSecurity-service">
					<h2>{this.state.medical?this.state.medical.title:null}<span></span></h2>
					<p>
                        {this.state.medical?this.state.medical.content:null}
					</p>
					<div className="MedicalSecurity-box">
						<img src={this.state.medical?this.state.medical.img1Url:null}/>
                        {/*<Link><img src="./img/MedicalSecurity1.png"/></Link>
								<Link><img src="./img/MedicalSecurity2.png"/></Link>
								<Link><img src="./img/MedicalSecurity3.png"/></Link>
								<Link><img src="./img/MedicalSecurity4.png"/></Link>*/}
					</div>
				</div>
				<div className="content service-intelligence">
					<h2>{this.state.intelligence?this.state.intelligence.title:null}<span></span></h2>
					<p>{this.state.intelligence?this.state.intelligence.content:null}</p>
					<div className="service-img">
						<img src={this.state.intelligence?this.state.intelligence.img1Url:null}/>
					</div>
				</div>
				<div className="bg-box">
					<div className="content health-fashion">
						<h2>{this.state.healthAndFashion?this.state.healthAndFashion.title:null}<span></span></h2>
						<p>
                            {this.state.healthAndFashion?this.state.healthAndFashion.content:null}
						</p>
						<div className="health-content">
							<img src={this.state.healthAndFashion?this.state.healthAndFashion.img1Url:null}/>
						</div>
					</div>
				</div>

				<div className="bg-box">
					<div className="content inter-quality">
						<h2>{this.state.international?this.state.international.title:null}<span></span></h2>
						<p>
                            {this.state.international?this.state.international.content:null}
						</p>
						<div className="qualityCon">
							<img src={this.state.international?this.state.international.img1Url:null}/>
						</div>
					</div>
				</div>
			</div>
        )
    }
}
export default FeatureService;
